<template>
  <div>
    <van-nav-bar
      title="礼品卡列表"
      left-arrow
      @click-left="onClickLeft"
      fixed
    ></van-nav-bar>
    <!-- 标签页 -->
    <van-tabs class="tabs" v-model="active" animated>
      <van-tab class="tabinfo" title="购买礼品卡">
        <van-image src="/images/gifts/2.jpeg"></van-image>
        <div class="card" v-for="item in cards" :key="item.id">
          <h3>{{ item.title }}</h3>
          <div class="theme">
            <div class="litem">
              <van-image class="img" :src="item.img1"></van-image>
              <p>{{ item.outline1 }}</p>
            </div>
            <div class="ritem">
              <van-image class="img" :src="item.img2"></van-image>
              <p>{{ item.outline2 }}</p>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="我的礼品卡">
        <no-gifts />
        <!-- 底部标签栏 -->
        <van-tabbar class="tabbar-gift" fixed>
          <van-tabbar-item name="history" to="/historygift">历史礼品卡</van-tabbar-item>
          <van-tabbar-item name="card" to="/cardrecord">获卡记录</van-tabbar-item>
          <van-tabbar-item name="send" to="/giftrecord">赠送记录</van-tabbar-item>
        </van-tabbar>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import NoGifts from "../components/NoGifts.vue";
export default {
  components: { NoGifts },
  data() {
    return {
      active: 0,
      cards: [], //保存礼品卡数据
    };
  },
  mounted() {
    // 加载礼品卡列表
    this.axios.get("/giftcard").then((res) => {
      console.log("礼品卡数据：", res);
      this.cards = res.data.data;
    });
  },
  methods: {
    onClickLeft() {
      this.$router.push("index");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-icon {
  color: black;
}
::v-deep .van-tabs__line {
  background-color: #a5d403;
}
::v-deep .van-tab--active {
  color: #a5d403;
}
::v-deep .tabbar-gift .van-tabbar-item {
  position: relative;
}
::v-deep .tabbar-gift .van-tabbar-item::after {
  content: "|";
  font-size: 6vw;
  color: #e2e5e7;
  display: inline-block;
  position: absolute;
  right: 0;
}
::v-deep .tabbar-gift .van-tabbar-item:nth-child(3)::after {
  content: "";
}
::v-deep .van-tabbar--fixed {
  left: 100%;
}
.tabs {
  margin-top: 46px;
}
.tabs .back {
  margin: 30vw auto 81vw;
}
.card {
  width: 94vw;
  margin: 4vw auto;
}
.card h3 {
  margin: 2vw;
  text-align: left;
  font-size: 4vw;
}
.card .theme {
  display: flex;
  justify-content: space-between;
}
.card .theme .litem,
.ritem {
  background-color: #fff;
  border-radius: 2vw;
}
.card .theme .img {
  width: 45vw;
}
::v-deep .van-image__img {
  border-radius: 5px 5px 0 0;
}
.card .theme p {
  margin: 2vw 0;
  font-size: 2vw;
}
</style>
